<!--首页地区组件-->
<template>
  <div class="region">
    <div class="content">
      <div class="left">地区:</div>
      <ul>
        <li :class="{active:RegionFlag==''}" @click="changeRegion('')" >全部</li>
        <li v-for="item in RegionArr" :key="item.value" :class="{active:RegionFlag==item.value}" @click="changeRegion(item.value)" >{{item.name}}</li>
<!--        <li>南明区</li>-->
<!--        <li>观山湖区</li>-->
<!--        <li>碧江区</li>-->
<!--        <li>万山区</li>-->
<!--        <li>云岩区</li>-->
<!--        <li>花溪区</li>-->
<!--        <li>乌当区</li>-->
<!--        <li>白云区</li>-->
<!--        <li>贵安新区</li>-->
<!--        <li>碧江新区</li>-->
<!--        <li>清镇市</li>-->
<!--        <li>德江县</li>-->
<!--        <li>修文县</li>-->
<!--        <li>玉屏县</li>-->
<!--        <li>开阳县</li>-->
<!--        <li>江口县</li>-->
<!--        <li>思南县</li>-->
<!--        <li>松桃县</li>-->
<!--        <li>石阡县</li>-->
<!--        <li>沿河县</li>-->
<!--        <li>印江县</li>-->
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reqHospitalLevelAndRegion} from "@/api/home";
import {HospitalLevelAndRegionResponseData,HospitalLevelAndRegionArr} from "@/api/home/type.ts";
import {onMounted, ref,} from "vue";
//自定义事件触发器
const $emits = defineEmits (["getRegion"]);
//地区数据
let RegionArr = ref<HospitalLevelAndRegionArr>([]);
//地区高亮响应式数据
let RegionFlag = ref<string>("");
//地区组件挂载完毕,获取地区的数据
onMounted(()=>{
  getRegion();
});
//获取地区的数据
const getRegion = async () => {
  let result:HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion("Beijin");
  //存储全部地区的数据
  if (result.code===200){
    RegionArr.value = result.data;
  }
};
//点击不同区域按钮的回调
const changeRegion = (region:string) => {
  RegionFlag.value = region;
  //触发自定义事件:将医院区域的数据回传给父组件
  $emits("getRegion",region);
}

</script>

<script lang="ts">
  export default {name:"Region",}
</script>

<style scoped lang="scss">
.region {
  color: #7f7f7f;
  margin-top: 10px;
  .content {
    display: flex;
    .left {
      margin-right: 10px;
      width: 38px;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        margin-right: 10px;
        margin-bottom: 10px;
        &.active{
          color: #55a6fe;
        }
      }
      li:hover{
        color: #55a6fe;
        cursor: pointer;
      }
    }
  }
}
</style>
